Revision:
Linear search and binary search are two fundamental algorithms used to find a specific element in a list or array. They differ significantly in terms of their approach, efficiency, and requirements.
Linear search scans each element in the list sequentially from the beginning to the end. It checks if the current element matches the target value. If a match is found, the index of the element is returned; otherwise, the algorithm concludes that the element is not present.
Binary search is a divide-and-conquer algorithm that works only on sorted arrays. It repeatedly divides the search interval in half:
1/compare the target value with the middle element of the array.
2/ If the target matches the middle element, return its index.
3/ If the target is smaller, repeat the search on the left half; if larger, repeat on the right half.
This process continues until the target is found or the interval becomes empty.
linear search
<div>
<p id="linear1"></p>
<p id="linear2"></p>
<p id="linear3"></p>
<p id="linear4"></p>
<p id="linear5"></p>
</div>
<scipt>
let linearSearch = (list, value) =>{
for(let aa = 0; aa<list.length; aa++){
if(list[aa] === value){
return aa;
}
}
return -1;
}
var list = [12, 45, 48, 5, 451, 2, 34, 43, 54, 66]
var value = 100;
var value1 = 45;
var value2 = 34;
var value3 = 66;
document.getElementById('linear1').innerHTML = "original list: " + list;
// original list: 12,45,48,5,451,2,34,43,54,66
document.getElementById('linear2').innerHTML = "position: " + linearSearch(list, value);
// position: -1
document.getElementById('linear3').innerHTML = "position: " + linearSearch(list, value1);
// position: 1
document.getElementById('linear4').innerHTML = "position: " + linearSearch(list, value2);
// position: 6
document.getElementById('linear5').innerHTML = "position: " + linearSearch(list, value3);
// position: 9
</script>
binary search
<div class="grid1 spec">
<div">
<p id="binary1"></p>
<p id="binary2"></p>
<p id="binary3"></p>
<p id="binary4"></p>
<p id="binary5"></p>
</div>
</div>
<script>
//sorted array mandatory!!
let BinarySearch = (list2,val)=>{
let left = 0;
let right = list2.length - 1;
let mid = Math.floor((left + right) / 2);
while (list2[mid] !== val && left <= right) {
if (val < list2[mid]) {
right = mid - 1
} else {
left = mid + 1
}
mid = Math.floor((left + right) / 2);
}
if (list2[mid] === val) {
return mid;
} else {
return -1
}
};
let list2 = [2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30]
let val1 = 20;
let val2 = 2;
let val3 = 26;
let val4 = 10;
document.getElementById('binary1').innerHTML = "original list: " + list2;
// original list: 2,4,6,8,10,12,14,16,18,20,22,24,26,28,30
document.getElementById('binary2').innerHTML = "position: " + BinarySearch(list2, val1);
// position: 9
document.getElementById('binary3').innerHTML = "position: " + BinarySearch(list2, val2);
// position: 0
document.getElementById('binary4').innerHTML = "position: " + BinarySearch(list2, val3);
// position: 12
document.getElementById('binary5').innerHTML = "position: " + BinarySearch(list2, val4);
// position: 4
</script>
selects an element by its id.
<div id="element">
<div id="element_content">element</div>
</div>
<script>
let element = document.getElementById("element");
element.style.background = "lightblue";
element.style.marginLeft = "2vw";
element.style.fontSize = "1.2vw";
</script>
<div id="element2">
<div id="element-content2">Element2</div>
</div>
<script>
let element2 = document.getElementById("element2")
element2.style.background = "orange";
element2.style.fontWeight = "bold";
element2.style.marginLeft = "5vw";
element2.style.fontStyle = "italic";
</script>
let div = document.getElementById("myDiv");
<div class="spec">
<p class="exam">a paragraph</p>
<p class="exam">second paragraph</p>
<p class="exam2">third paragraph</p>
<p class="exam2">fourth paragraph</p>
</div>
<script>
let nodeList = document.querySelectorAll('.exam');
for (let i = 0; i < nodeList.length; i++){
nodeList[i].style.backgroundColor = "red";
}
for (let i = 0; i < nodeList.length; i++){
nodeList[i].style.fontSize = "1.5vw";
}
let nodeList2 = document.querySelectorAll('.exam2');
for (let i = 0; i < nodeList2.length; i++){
nodeList2[i].style.backgroundColor = "blue";
}
for (let i = 0; i < nodeList2.length; i++){
nodeList2[i].style.fontSize = ".8vw";
}
</script
<div>
<div class="box">Box number 1</div>
<div class="box">Box number 2</div>
<div data-id="3">Box number 3</div>
<div data-id="4">Box number 4</div>
<div data-id="5">Box number 5</div>
<div class="box2">Box number 6</div>
<div class="box2">Box number 7</div>
<div class="box2">Box number 8</div>
</div>
<script>
// select by tag name
const group1 = document.querySelectorAll(".box");
for (let j = 0; j < group1.length; j++){
group1[j].style.backgroundColor = "lightgreen";
}
// // select by class name
const group2 = document.querySelectorAll(".box2");
for (let k = 0; k < group2.length; k++){
group2[k].style.backgroundColor = "lightblue";
}
// // select by attribute
const group3 = document.querySelectorAll("[data-id]");
for (let l = 0; l < group3.length; l++){
group3[l].style.backgroundColor = "yellow";
}
</script>
<div class="spec">
<p class="q">This is a p element.</p>
<p class="q">This is a p element.</p>
<p class="r">This is a p element.</p>
<p class="r">This is a p element.</p>
<div class="spec">
<a href="https://www.lwitters.com">my website</a><br><br>
<a href="http://www.disney.com" target="_blank">disney.com</a><br><br>
<a href="http://www.wikipedia.org" target="_top">wikipedia.org</a>
</div>
</div>
<style>
a[target]{background-color: yellow;}
</style>
<script>
document.querySelector(".q").style.backgroundColor = "red";
document.querySelector(".r").style.color = "yellow";
document.querySelector("a[target]").style.border = "0.2vw solid red";
</script>
<div class="spec">
<h4 class="myClass">Class 4</h4>
<p class="myClass"> Myclass</p>
<div id="firstid">
<p> This is the div p paragraph</p>
<p class="pclass"> div p class</p>
</div>
<p id="myid"> Thist is p id</p>
<div class="spec" id="divid"> This is div id</div>
</div>
<script>
var e=document.querySelector(".myClass");
e.style.color = 'red';
e.style.fontSize = "2vw";
</script>
let div2 = document.querySelector("#myDiv");
<div>
<p id="item1"></p>
</div>
<script>
function matchString() {
var string = "Welcome to this website";
var result = string.match(/we/g);
document.getElementById("item1").innerHTML = "Output : " + result;
}
matchString();
// Output: we
</script>
<div class="spec">
<ul id="birds">
<li>Orange-winged parrot</li>
<li class="endangered">Philippine eagle</li>
<li>Great white pelican</li>
</ul>
<p id="item2"></p>
</div>
<script>
const birds = document.querySelectorAll('li');
for (const bird of birds) {
if (bird.matches('.endangered')) {
document.getElementById('item2').innerHTML = (`The ${bird.textContent} is endangered!`);
}
}
// The Philippine eagle is endangered!
</script>
<div>
<p id="item3"></p>
</div>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
let results = text.match(/ain/gi);
document.getElementById("item3").innerHTML = results;
// ain,AIN,ain,ain
</script>
<div>
<p id="item3"></p>
</div>
<script>
let text = "The rain in SPAIN stays mainly in the plain";
let results = text.match(/ain/gi);
document.getElementById("item4").innerHTML = results1;
// ain,ain,ain
</script>
<div class="spec">
<p id="mat1"></p>
<p id="mat2"></p>
</div>
<script>
const strA = "learning to code is learning to create and innovate";
// with g flag
const regexp1 = /l((earn)ing)/g;
const match1 = strA.match(regexp1);
console.log(match1); // [ "learning", "learning" ]
document.getElementById("mat1").innerHTML = JSON.stringify(match1);
// ["learning","learning"]
// removing g flag
const regexp2 = /l((earn)ing)/;
const match2 = strA.match(regexp2);
console.log(match2, match2.index, match2.input); // [ "learning", "earn" ]
document.getElementById("mat2").innerHTML = JSON.stringify(match2);
// ["learning","earning","earn"]
</script>
<div class="spec">
<p id="mat3"></p>
<p id="mat4"></p>
</div>
<script>
const strB = "learning to code is learning to create and innovate";
const regexp3 = "(ea)(t)"; // not a regular expression
const matches = strB.matchAll(regexp3);
const matches3 = strB.matchAll(); // no regexp passed
console.log(Array.from(matches));
document.getElementById("mat3").innerHTML = matches;
// [object RegExp String Iterator]
console.log(Array.from(matches3));
document.getElementById("mat4").innerHTML = matches3;
// [object RegExp String Iterator]
</script>
<div class="item44"> Grandparent
<div class="item44 container">Parent
<div id="item44" class="item44">The parent of this div element will be selected.</div>
</div>
</div>
<style>
.container, .item44{background-color: tomato;color: white;padding: 2vw;margin: 1vw;}
</style>
<script>
const el = document.getElementById("item44");
const closest = el.closest(".container");
if (closest) {
closest.style.border = "4px solid black";
}
</script>
<div>
<ul id="one" class="level-1">
<li class="top-1">Home</li>
<li id="ii" class="top-2">Products
<ul class="level-2">
<li class="category-1">Clothing</li>
<li class="category-2">Electronics
<ul class="level-3">
<li class="product-1">Camera</li>
<li class="product-2">Computer</li>
<li class="product-3">Phone</li>
</ul>
</li>
<li class="category-3">Kitchen</li>
</ul>
</li>
<li class="top-3">About</li>
</ul>
</div>
<script>
const m = document.querySelector("li.category-1");
m.style.color = 'red';
const close1 = m.closest("ul");
close1.style.background = 'yellow';
const close2 = m.closest("li");
close2.style.background = 'green';
</script>
Some outer text
Some outer text
Some div1 text
Some div1 text
Some div1 text
Some div2 text
Some div2 text
Some outer text
Some outer text
<div class="item5 spec" style="width: 35vw; margin: 0 auto;">
<p>Some outer text</p>
<p>Some outer text</p>
<div id="div1" style="border: solid blue 3px">
<p>Some div1 text</p>
<p>Some div1 text</p>
<p>Some div1 text</p>
<div id="div2" style="border: solid red 3px">
<p>Some div2 text</p>
<p>Some div2 text</p>
</div>
</div>
<p>Some outer text</p>
<p>Some outer text</p>
<button onclick="getAllParaElems();">Show all p elements in document</button>
<p id="item6"></p>
<button onclick="div1ParaElems();">Show all p elements in div1 element</button><br/>
<p id="item7"></p>
<button onclick="div2ParaElems();">Show all p elements in div2 element</button>
<p id="item8"></p>
</div>
<script>
function getAllParaElems() {
const allParas = document.getElementsByTagName("p");
const num = allParas.length;
document.getElementById("item6").innerHTML = (`There are ${num} paragraph in this document`);
}
function div1ParaElems() {
const div1 = document.getElementById("div1");
const div1Paras = div1.getElementsByTagName("p");
const num = div1Paras.length;
document.getElementById("item7").innerHTML = (`There are ${num} paragraph in #div1`);
}
function div2ParaElems() {
const div2 = document.getElementById("div2");
const div2Paras = div2.getElementsByTagName("p");
const num = div2Paras.length;
document.getElementById("item8").innerHTML = (`There are ${num} paragraph in #div2`);
}
</script>
A p element with class="example".
A span element with class="example".
<div>
<div class="item10">A div with class="example"</div><br>
<div class="item10">A div with class="example"</div>
<p class="item10">A p element with class="example".</p>
<p>A <span class="item10">span</span> element with class="example".</p>
</div>
<script>
const collection = document.getElementsByClassName("item10");
for (let n = 0; n < collection.length; n++) {
collection[n].style.backgroundColor = "lightblue";
collection[n].style.fontSize = "2vw";
collection[n].style.fontStyle = "italic";
}
</script>
hello world 1
hello world 2
hello world 3
hello world 4
<div>
<div id="parent-id">
<p>hello world 1</p>
<p class="test">hello world 2</p>
<p>hello world 3</p>
<p>hello world 4</p>
</div>
<p id="item11"></p>
<p id="item12"></p>
</div>
<script>
const parentDOM = document.getElementById("parent-id");
const test = parentDOM.getElementsByClassName("test");
// a list of matching elements, *not* the element itself
console.log(test); // HTMLCollection[1]
item11.innerText = test;
const testTarget = parentDOM.getElementsByClassName("test")[0];
// the first element, as we wanted
console.log(testTarget); // <p class="test">hello world 2</p>
document.getElementById("item12").innerHTML = testTarget;
</script>
<div class="spec">
<span class="orange fruit">Orange Fruit</span><br>
<span class="orange juice">Orange Juice</span><br/>
<span class="apple juice">Apple Juice</span><br/>
<span class="foo bar">Something Random</span><br/>
<textarea id="resultArea" style="width:90%;height:7vw"></textarea>
</div>
<script>
// getElementsByClassName only selects elements that have both given classes
const allOrangeJuiceByClass = document.getElementsByClassName('orange juice');
let result = "document.getElementsByClassName('orange juice')";
for (let q = 0; q < allOrangeJuiceByClass.length; q++) {
result += `\n ${allOrangeJuiceByClass[q].textContent}`;
}
// querySelector only selects full complete matches
const allOrangeJuiceQuery = document.querySelectorAll('.orange.juice');
result += "\n\ndocument.querySelectorAll('.orange.juice')";
for (let r = 0; r < allOrangeJuiceQuery.length; r++) {
result += `\n ${allOrangeJuiceQuery[r].textContent}`;
}
document.getElementById("resultArea").value = result;
</script>
This is a paragraph.
This is another paragraph.
This is still another paragraph.
<div>
<div class="example">Element1</div><br>
<div class="example">Element2</div><br>
<div class="example2"><p>This is a paragraph.</p></div><br>
<div class="example2 color"><p>This is another paragraph.</p></div><br>
<div class="example2 color"><p>This is still another paragraph.</p></div>
</div>
<style>
div.example2{border: 0.1vw solid black; padding:0.1vw;}
</style>
<script>
const collectionA = document.getElementsByClassName("example");
collectionA[0].innerHTML = "Hello World!";
const collectionB = document.getElementsByClassName("example2 color");
collectionB[0].style.backgroundColor = "red";
collectionB[1].style.backgroundColor = "lightblue";
</script>
Please rate the service:
<div class="spec">
<p>Please rate the service:</p>
<p>
<label for="very-poor">
<input type="radio" name="rate" value="Very poor" id="very-poor"> Very poor
</label>
<label for="poor">
<input type="radio" name="rate" value="Poor" id="poor"> Poor
</label>
<label for="ok">
<input type="radio" name="rate" value="OK" id="ok"> OK
</label>
<label for="good">
<input type="radio" name="rate" value="Good"> Good
</label>
<label for="very-good">
<input type="radio" name="rate" value="Very Good" id="very-good"> Very Good
</label>
</p>
<p>
<button id="btnRate">Submit</button>
</p>
<p id="output"></p>
</div>
<script>
let btn = document.getElementById('btnRate');
let output = document.getElementById('output');
btn.addEventListener('click', () => {
let rates = document.getElementsByName('rate');
rates.forEach((rate) => {
if (rate.checked) {
output.innerText = `You selected: ${rate.value}`;
}
});
});
</script>
<div>
<p id="in1"></p>
<p id="in2"></p>
<p id="in3"></p>
<p id="in4"></p>
<p id="in5"></p>
</div>
<script>
const array1 = [1, 2, 3];
document.getElementById("in1").innerHTML = "array : " + array1;
// array : 1,2,3
document.getElementById("in2").innerHTML = (array1.includes(2));
// true
const pets = ['cat', 'dog', 'bat'];
in3.innerText = "pets : " + pets;
// pets : cat,dog,bat
document.getElementById("in4").innerHTML = pets.includes("cat");
// true
document.getElementById("in5").innerHTML = pets.includes("at");
// FALSE
</script>
<div class="spec">
<p id="in6"></p>
<p id="in7"></p>
</div>
<script>
const array = [10, 11, 3, 20, 5];
const includesTwenty = array.includes(20);
document.getElementById("in6").innerHTML = "array includes 20: " + includesTwenty;
// array includes 20: true
const includesTenTwice = array.includes(10, 1);
document.getElementById("in7").innerHTML = "array includes 10 twice: " + includesTenTwice;
// array includes 10 twice: false
</script>
The search() method matches a string against a regular expression. It returns the index (position) of the first match. It returns -1 if no match is found. This method is case sensitive.
<div class="spec">
<p id="search"></p>
<p id="search1"></p>
<p id="search2"></p>
<p id="search3"></p>
<p id="search4"></p>
</div>
<script>
let text_a = "Mr. Blue has a blue house"
let position = text_a.search("Blue");
document.getElementById("search").innerHTML = "position of 'Blue': " + position;
// position of 'Blue': 4
let position1 = text_a.search("blue");
document.getElementById("search1").innerHTML = "position of 'blue': " + position1;
// position of 'blue': 15
let position2 = text_a.search(/Blue/);
document.getElementById("search2").innerHTML = "position of '/Blue/': " + position2;
// position of '/Blue/': 4
let position3 = text_a.search(/blue/);
document.getElementById("search3").innerHTML = "position of '/blue/': " + position3;
// position of '/blue/': 15
let position4 = text_a.search(/blue/i);
document.getElementById("search4").innerHTML = "position of '/blue/i': " + position4;
// position of '/blue/i': 4
</script>
<div class="spec">
<p id="search5"></p>
<p id="search6"></p>
<p id="search7"></p>
</div>
<script>
let sentence= "I love JavaScript.";
// pattern that searches the first occurence of an uppercase character
let regExp = /[A-Z]/;
// searching for a match between regExp and given string
let indexReg = sentence.search(regExp);
document.getElementById("search5").innerHTML = indexReg; // output: 0
let string1 = "JavaScript JavaScript1";
// pattern having 'JavaScript' followed by a digit
let regExp1 = /(JavaScript)\d/;
// searching for a match between regExp and given string
let index = string1.search(regExp1);
document.getElementById("search6").innerHTML = index; // output: 11
let string2 = "I love to code in JavaScript.";
// searching word "JavaScript" in the given string
let index2 = string2.search("code");
document.getElementById("search7").innerHTML = index2; // output: 10
</script>
The startsWith() method checks if a string begins with a specified string. it is a simple and efficient way to check if a string begins with a specific substring. Its case-sensitive nature and optional position parameter make it versatile for various use cases, such as input validation, filtering arrays, and more.
syntax: str.startsWith(searchString, position);
searchString : the substring to search for at the beginning of the string.
position (optional) : the position in the string at which to begin searching. Defaults to 0 (the start of the string).
const str = "Hello, world!";
console.log(str.startsWith("Hello")); // true
console.log(str.startsWith("world")); // false
const str = "JavaScript";
console.log(str.startsWith("java")); // false (case-sensitive)
console.log(str.startsWith("Java")); // true
const str = "Hello, world!";
console.log(str.startsWith("world", 7)); // true (starts checking from index 7)
console.log(str.startsWith("world", 6)); // false (index 6 is a space)
const str = "Hello, world!";
console.log(str.startsWith("world", 7)); // true (starts checking from index 7)
console.log(str.startsWith("world", 6)); // false (index 6 is a space)
const str = "Hello";
console.log(str.startsWith("")); // true (an empty string is always a match)
const str = "Hello";
console.log(str.startsWith("Hi")); // false
The endsWith() method checks if a string ends with a specified string. The method is a built-in JavaScript string method that determines whether a string ends with the characters of a specified substring. It returns a boolean value (true or false) based on whether the string ends with the given substring.
syntax: str.endsWith(searchString, position);
searchString : the substring to search for at the end of the string.
length (optional) : specifies the length of the string to consider. If provided, the method checks if the substring ends within the first length characters of the string. Defaults to the full length of the string.
const str = "Hello, world!";
console.log(str.endsWith("world!")); // true
console.log(str.endsWith("Hello")); // false
const str = "JavaScript";
console.log(str.endsWith("script")); // true
console.log(str.endsWith("Script")); // false (case-sensitive)
const str = "Hello, world!";
console.log(str.endsWith("world", 12)); // true (considers only the first 12 characters: "Hello, world")
console.log(str.endsWith("world!", 11)); // false (only considers "Hello, worl")
const str = "Hello";
console.log(str.endsWith("")); // true (an empty string is always a match)
const str = "Hello";
console.log(str.endsWith("Hi")); // false
function isImageFile(filename) {
return filename.endsWith(".jpg") || filename.endsWith(".png");
}
console.log(isImageFile("photo.jpg")); // true
console.log(isImageFile("document.pdf")); // false
<div>
<div class="search-container">
<input type="text" id="searchInput" placeholder="Search...">
<button id="searchButton">Search</button>
</div>
<div class="search-results" id="searchResults">
<!-- Search results will be displayed here -->
</div>
</div>
<script>
document.getElementById('searchButton').addEventListener('click', function() {
const searchQuery = document.getElementById('searchInput').value.toLowerCase();
const content = [
{ title: 'Introduction to JavaScript', content: 'JavaScript is a programming language...' },
{ title: 'HTML Basics', content: 'HTML stands for HyperText Markup Language...' },
{ title: 'CSS Styling', content: 'CSS is used to style HTML elements...' },
{ title: 'Advanced JavaScript', content: 'Advanced JavaScript covers topics like closures...' }
];
const searchResults = document.getElementById('searchResults');
searchResults.innerHTML = ''; // Clear previous results
content.forEach(item => {
if (item.title.toLowerCase().includes(searchQuery) || item.content.toLowerCase().includes(searchQuery)) {
const resultItem = document.createElement('div');
resultItem.innerHTML = `<h3>${item.title}</h3><p>${item.content}</p>`;
searchResults.appendChild(resultItem);
}
});
if (searchResults.children.length === 0) {
searchResults.innerHTML = '<p>No results found.</p>';
}
});
</script>
<div>
<div class="search-container-1">
<input type="text" id="searchInput-1" placeholder="Search...">
<button id="searchButton-1">Search</button>
</div>
<div id="contentContainer">
<!-- Dynamic content will be loaded here -->
</div>
</div>
<script>
// Sample dynamic content (could be fetched from an API or generated dynamically)
const dynamicContent = [
{ title: 'Introduction to JavaScript', content: 'JavaScript is a programming language...' },
{ title: 'HTML Basics', content: 'HTML stands for HyperText Markup Language...' },
{ title: 'CSS Styling', content: 'CSS is used to style HTML elements...' },
{ title: 'Advanced JavaScript', content: 'Advanced JavaScript covers topics like closures...' }
];
// Function to render content
function renderContent(content) {
const contentContainer = document.getElementById('contentContainer');
contentContainer.innerHTML = ''; // Clear previous content
content.forEach(item => {
const contentItem = document.createElement('div');
contentItem.className = 'content-item';
contentItem.innerHTML = `<h3>${item.title}</h3><p>${item.content}</p>`;
contentContainer.appendChild(contentItem);
});
}
// Initial render of all content
renderContent(dynamicContent);
// Search functionality
document.getElementById('searchButton-1').addEventListener('click', function () {
const searchQuery = document.getElementById('searchInput-1').value.toLowerCase();
const filteredContent = dynamicContent.filter(item => {
return (
item.title.toLowerCase().includes(searchQuery) ||
item.content.toLowerCase().includes(searchQuery)
);
});
renderContent(filteredContent); // Render filtered content
});
</script>
<div>
<div class="search-container-2">
<input type="text" id="searchInput-2" placeholder="Search...">
<!-- <button id="searchButton-1">Search</button> -->
</div>
<div id="contentContainer-2">
<!-- Dynamic content will be loaded here -->
</div>
</div>
<script>
let timeout;
document.getElementById('searchInput-2').addEventListener('input', function () {
clearTimeout(timeout);
timeout = setTimeout(() => {
const searchQuery = document.getElementById('searchInput-2').value.toLowerCase();
const filteredContent = dynamicContent.filter(item => {
return (
item.title.toLowerCase().includes(searchQuery) ||
item.content.toLowerCase().includes(searchQuery)
);
});
renderContent(filteredContent);
}, 300); // 300ms debounce delay
});
</script>
<div class="dropdown">
<input type="text" id="searchInput_A" placeholder="Search..." autocomplete="off">
<ul id="dropdownList" class="dropdown-list"></ul>
</div>
<style>
.dropdown { position: relative; width: 300px;}
#searchInput_A {width: 100%; padding: 8px; border: 1px solid #ccc; border-radius: 5px; }
.dropdown-list {position: absolute; width: 100%; max-height: 200px; overflow-y: auto; background: #fff; border: 1px solid #ccc;
border-radius: 5px; display: none; list-style: none; padding: 0;}
.dropdown-list li { padding: 8px; cursor: pointer;}
.dropdown-list li:hover { background: #f0f0f0; }
.highlight{background-color: #d3d3d3;}
</style>
<script>
const searchInput_A = document.getElementById("searchInput_A");
const dropdownList = document.getElementById("dropdownList");
// Sample dataset
const items = ["Apple", "Banana", "Cherry", "Date", "Grapes", "Mango", "Orange", "Pineapple"];
let debounceTimer;
async function fetchData() {
const response = await fetch("https://jsonplaceholder.typicode.com/users");
const data = await response.json();
return data.map(user => user.name); // Extracting names
}
async function initializeDropdown() {
const users = await fetchData();
items.push(...users); // Add fetched users to dropdown
}
function filterItems(searchText) {
// Convert input to lowercase for case-insensitive search
const filteredItems = items.filter(item => item.toLowerCase().includes(searchText.toLowerCase()));
// Clear previous results
dropdownList.innerHTML = "";
// Show the dropdown only if results exist
if (filteredItems.length > 0) {
dropdownList.style.display = "block";
filteredItems.forEach(item => {
let li = document.createElement("li");
li.innerText = item;
li.onclick = () => selectItem(item);
dropdownList.appendChild(li);
});
} else {
dropdownList.style.display = "none";
}
}
function selectItem(value) {
searchInput_A.value = value;
dropdownList.style.display = "none";
}
// Debounce the input to avoid excessive filtering
searchInput_A.addEventListener("input", () => {
clearTimeout(debounceTimer);
debounceTimer = setTimeout(() => filterItems(searchInput.value), 300);
});
// Keyboard navigation logic
let currentIndex = -1;
searchInput_A.addEventListener("keydown", (e) => {
let options = dropdownList.querySelectorAll("li");
if (e.key === "ArrowDown") {
currentIndex = (currentIndex + 1) % options.length;
} else if (e.key === "ArrowUp") {
currentIndex = (currentIndex - 1 + options.length) % options.length;
} else if (e.key === "Enter") {
selectItem(options[currentIndex].innerText);
}
options.forEach(option => option.classList.remove("highlight"));
if (options[currentIndex]) options[currentIndex].classList.add("highlight");
});
// Initialize dropdown with API data
initializeDropdown();
// Listen for input changes
searchInput_A.addEventListener("input", () => filterItems(searchInput_A.value));
</script>